﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>综合数据监控平台</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Le styles -->
    <script type="text/javascript" src="assets/js/jquery.js"></script>

    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/loader-style.css">
    <link rel="stylesheet" href="assets/css/bootstrap.css">
    <link href="assets/js/footable/css/footable.core.css?v=2-0-1" rel="stylesheet" type="text/css">
    <link href="assets/js/footable/css/footable.standalone.css" rel="stylesheet" type="text/css">
    <link href="assets/js/footable/css/footable-demos.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="assets/js/dataTable/lib/jquery.dataTables/css/DT_bootstrap.css">
    <link rel="stylesheet" href="assets/js/dataTable/css/datatables.responsive.css">

    <script type="text/javascript" src="assets/js/jquery.js"></script>
</head>
<body>

    <table class="table-striped footable-res footable metro-blue" data-page-size="10" id="item_table">
        <thead>
            <tr>
                <th>
                    <input type="checkbox" value="全选" id="all">
                </th>
                <th>序号</th>
                <th>客户名称</th>
                <th>设备名称</th>
                <th>仪表编号</th>
                <th>SIM卡号码</th>
                <th>注册状态</th>
                <th>设备锁定</th>
                <th>所属区域</th>
                <th>地理位置</th>
                <th>测点分布</th>
                <th>报警开关</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 喵喵喵 -->
        </tbody>
        <tfoot>
            <tr>
                <td colspan="13">
                    <div class="pagination pagination-centered"></div>
                </td>
            </tr>
        </tfoot>
    </table>
    <script type="text/javascript" src="assets/js/socket.io.js"></script>
    <script type="text/javascript" src="demo/test.js"></script>
    <script>
       //注意，数据填入在test.js里面
        //获取数据时data里面放入itemsPerPage 和 currentPage
        //分别代表每页个数和取哪一页
  
        var socket = io.connect('http://139.196.28.69:3000');
        socket.on('connect', function () {
            console.log("connected!");
            //获取device表数据，请求数据,每页10个，取第一页
            var data = { itemsPerPage:10, currentPage:1};
            socket.emit('data_device_select',data);
            /* 具体操作 */
        });
        //服务器端发送数据，count为总数据个数
        socket.on('data_device', function (data, pagecount) {
            console.log("receive data" + data);
            set_json_data(data);
        });
       
    </script>
    <!-- 自适应表格 -->
    <script src="assets/js/footable/js/footable.js?v=2-0-1" type="text/javascript"></script>
    <script src="assets/js/footable/js/footable.paginate.js?v=2-0-1" type="text/javascript"></script>
    <script src="assets/js/footable/js/footable.paginate.js?v=2-0-1" type="text/javascript"></script>

    <!-- 表格行复选框的控制 -->
    <script src="assets/js/tableItemSelect.js"></script>

</body>
</html>
